<!DOCTYPE html>
<html lang="en" ng-app="foundationDemoApp" id="top">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Angular directives for Foundation</title>
  <meta name="description" content="AngularJS (Angular) native
  directives for Foundation. Small footprint (5kB gzipped!),
  no 3rd party JS dependencies (jQuery, Foundation JS) required!
  Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>">

  <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
  <script src="mm-foundation-tpls-<%= pkg.version%>.js"></script>
  <script src="assets/plunker.js"></script>
  <script src="assets/app.js"></script>

  <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/<%= fdversion %>/css/foundation.min.css" rel="stylesheet"/>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/<%= faversion %>/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="assets/rainbow.css"/>
  <link rel="stylesheet" href="assets/demo.css"/>
  <link rel="author" href="https://github.com/pineconellc/angular-foundation/graphs/contributors">
</head>
<body class="ng-cloak" ng-controller="MainCtrl">
<div class="fixed">
  <top-bar scrolltop="false">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Angular Foundation</a></h1>
      </li>
      <li toggle-top-bar class="menu-icon"><a href="#">Menu</a></li>
    </ul>

    <top-bar-section>
      <ul class="right">
        <li><a href="#getting_started">Getting started</a></li>
        <li has-dropdown>
          <a href="#">Directives</a>
          <ul id="directives-list" top-bar-dropdown>
            <% demoModules.forEach(function(module) {  %><li><a href="#<%= module.name %>"><%= module.displayName %></a></li><% }); %>
          </ul>
        </li>
        <li><a href="#animations">Animations</a></li>
      </ul>
    </top-bar-section>
  </topbar>
</div>
<div class="header-placeholder"></div>
<div role="main">
  <header class="bs-header text-center" id="overview">
    <figure>
      <img src="assets/logo.png" class="logo" />
    </figure>
    <div class="container">
      <div class="row">
        <div class="columns large-12 medium-11 small-11 small-centered">

          <h1>Angular Foundation</h1>
          <h3>With love, from <a href="http://github.com/pineconellc/">Pinecone</a></h3>
          <hr>
          <p>
          <a class="button radius large" href="https://github.com/pineconellc/angular-foundation/tree/gh-pages"><i class="fa fa-download"></i> Download v<%= pkg.version %></a>
            <a class="button radius large" href="https://github.com/pineconellc/angular-foundation"><i class="fa fa-github"></i> Contribute</a>
          </p>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="columns border large-12 medium-11 small-11 small-centered">
        <section id="getting_started">
          <div class="page-header">
            <h1>Getting started</h1>
          </div>
          <h3>Dependencies</h3>
          <p>
            This repository contains a set of <strong>native AngularJS directives</strong> based on
            Foundation's markup and CSS. As a result no dependency on
            jQuery or Foundation's
            JavaScript is required. The <strong>only required dependencies</strong> are:
          </p>
          <ul>
            <li><strong>AngularJS</strong> 1.3 or 1.4 (tested with <%= nglegacyversion %> and <%= ngversion %>)</li>
            <li><strong>Foundation 5 CSS</strong> (tested with version <%= fdversion %>).</li>
          </ul>
          <h3>Downloading</h3>
          <p>
            Build files for all directives are distributed in several flavours: minified for production usage, un-minified
            for development, with or without templates. All the options are described and can be
            <a href="https://github.com/pineconellc/angular-foundation/tree/gh-pages">downloaded from here</a>.
          </p>
          <h3>Installation</h3>
          <p>As soon as you've got all the files downloaded and included in your page you just need to declare
             a dependency on the <code>mm.foundation</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
             <pre><code>angular.module('myModule', ['mm.foundation']);</code></pre>
          </p>
          <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
        </section>
        <% demoModules.forEach(function(module) { %>
          <section class="demo" id="<%= module.name %>">
            <div class="page-header">
              <h1><%= module.displayName %><small>
                (<a target="_blank" href="https://github.com/pineconellc/angular-foundation/tree/master/src/<%= module.name %>">mm.foundation.<%= module.name %></a>)
              </small></h1>
            </div>
            <div class="row">
              <div class="columns medium-6 show-grid">
                <%= module.docs.html %>
              </div>
              <div class="columns medium-6">
                <%= module.docs.md %>
              </div>
            </div>
            <hr>
            <div class="row code">
              <div class="columns medium-12" ng-controller="PlunkerCtrl">
                <div class="right">
                  <button class="button secondary" id="plunk-btn" ng-click="edit('<%= ngversion%>', '<%= fdversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="fa fa-edit"></i> Edit in plunker</button>
                </div>
                <tabset>
                  <tab heading="Markup">
                    <div plunker-content="markup">
                      <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
                    </div>
                  </tab>
                  <tab heading="JavaScript">
                    <div plunker-content="javascript">
                      <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
                    </div>
                  </tab>
                </tabset>
              </div>
            </div>
          </section>
          <script><%= module.docs.js %></script>
        <% }); %>
        <section id="animations">
          <div class="page-header">
            <h1>Animations</h1>
            <p>Foundation includes animations in its JavaScript files but
            the components above don't use Foundation's JavaScript.
            You can use the official Angular module ngAnimate in your project
            or simple CSS animations like the example below.</p>
          </div>
          <div class="row">
            <div class="columns medium-12">
            </div>
          </div>
          <hr>
          <div class="row code">
            <div class="columns medium-12">
              <pre><code data-language="css">.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
          transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}

.reveal-modal.fade {
  -webkit-transition: -webkit-transform .3s ease-out;
     -moz-transition:    -moz-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.reveal-modal.in {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.reveal-modal-bg.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.reveal-modal-bg.in {
  filter: alpha(opacity=50);
  opacity: .5;
}</code></pre>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
  <div class="container">
    <p>Code licensed under <a href="https://github.com/pineconellc/angular-foundation/blob/master/LICENSE"><%= pkg.license %> License</a>.</p>
    <p><a href="https://github.com/pineconellc/angular-foundation/issues?state=open">Issues</a></p>
  </div>
</footer>
<script src="assets/rainbow.js"></script>
<script src="assets/rainbow-generic.js"></script>
<script src="assets/rainbow-javascript.js"></script>
<script src="assets/rainbow-html.js"></script>
<script type="text/ng-template" id="downloadModal.html">
  <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>
  <div class="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label"><strong>Build</strong></label>
        <div class="col-sm-9">
          <span class="button-group">
            <button type="button" class="button" ng-model="options.minified" btn-radio="true">Minified</button>
            <button type="button" class="button" ng-model="options.minified" btn-radio="false">Uncompressed</button>
          </span>
          <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"><strong>Include Templates</strong></label>
        <div class="col-sm-9">
          <span class="button-group">
            <button type="button" class="button" ng-model="options.tpls" btn-radio="true">Yes</button>
            <button type="button" class="button" ng-model="options.tpls" btn-radio="false">No</button>
          </span>
          <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"><strong>Bower</strong></label>
        <div class="col-sm-9">
          <small>If you are using Bower just run:</small>
          <pre>bower install angular-foundation</pre>
          <small class="help-block"><a href="http://bower.io/" target="_blank">Bower</a> is a package manager for the web.</small>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <a class="button" ng-click="cancel()">Cancel</a>
    <a class="button" ng-click="download('<%= pkg.version%>')"><i class="fa fa-download"></i> Download <%= pkg.version %></a>
  </div>
</script>

<script src="assets/smoothscroll-angular-custom.js"></script>
</body>
</html>
